<template>
    <div v-if="userId !== 1">
      <div>
        <el-card>
          <el-row>
            <el-col :span="24" align="middle">
              <el-steps :active="activeStep" align-center>
                <el-step v-for="item in stepData" :title="item.title" :description="item.content" :key="item.id"></el-step>
              </el-steps>
            </el-col>
          </el-row>
          <br/>
          <el-row>
            <el-col :span="24" align="middle">
              提交论文
              <el-upload
                drag
                action="http://localhost:10000/api/thirdparty/oss"
                :on-success="handleFileSuccess"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">上传论文之前，请检查好是否为最新版</div>
              </el-upload>
            </el-col>
          </el-row>
        </el-card>
        <br/>
        <el-card>
          <el-row>
            <el-col :span="12" style="border-right: #8c939d solid 1px">
              <el-row>
                <el-col :span="4">
                  <el-avatar shape="square" :size="100" fit="fill" :src="studentInfo.gender === '0' ? studentImg[0] : studentImg[1]"></el-avatar>
                </el-col>
                <el-col :span="20" align="middle">
                  {{studentInfo.name}} 《{{projectName}}》
                </el-col>
              </el-row>
              <div v-for="(item, index) in sProject.times" :key="index">
                <el-row>
                  <el-col :offset="4" :span="20" style="padding: 10px">
                    <el-card>
                      <div slot="header">
                        第{{index + 1}}版(原版)
                      </div>
                      <span><b>提交时间：</b>{{item}}</span>
                      <span style="margin-left: 10%"><b>
                      查看文件：</b><el-button @click="downFile(sProject.address[index])" size="mini" type="primary ">下载</el-button>
                    </span>
                    </el-card>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="12">
              <el-row>
                <el-col :span="20" align="middle">
                  {{teacherInfo.name}} 《{{projectName}}》
                </el-col>
                <el-col :span="4">
                  <el-avatar shape="square" :size="100" fit="fill" :src="teacherImg[1]"></el-avatar>
                </el-col>
              </el-row>
              <div  v-for="(item, index) in tProject.times" :key="index">
                <el-row>
                  <el-col :span="19" :offset="1"  style="padding: 10px">
                    <el-card>
                      <div slot="header">
                        第{{index + 1}}版(批注)
                      </div>
                      <div v-if="tProject.address[index]">
                        <span><b>提交时间：</b>{{item}}</span>
                        <span style="margin-left: 10%"><b>
                      查看文件：</b><el-button @click="downFile(tProject.address[index])" size="mini" type="primary ">下载</el-button>
                      </span>
                      </div>
                      <div v-else>
                        <span style="font-size: 22px">暂无，等待指导老师批注</span>
                      </div>
                    </el-card>
                  </el-col>
                  <el-col :span="4"></el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </div>
    <div v-else>
      <h1>暂无权限</h1>
    </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {mixin} from "../mixins";
  import {saveProject, selectProjectByStudentId, selectProjectProcess, selectStudentProcess} from "../api/gdm";

  export default {
    name: "GDM",
    computed: {
      ...mapGetters([
        "userId"
      ])
    },
    data() {
      return {
        projectName: '',
        studentInfo: {
          name: '',
          gender: ''
        },
        teacherInfo: {
          name: ''
        },
        sProject: {
          address: [],
          times: []
        },
        tProject:{
          address: [],
          times: []
        },
        studentImg: [
          'https://gulimall-xiaochun.oss-cn-beijing.aliyuncs.com/img/%E5%A4%A7%E5%AD%A6%E7%94%9F%EF%BC%88%E5%A5%B3%EF%BC%89.png',
          'https://gulimall-xiaochun.oss-cn-beijing.aliyuncs.com/img/%E5%A4%A7%E5%AD%A6%E7%94%9F%EF%BC%88%E7%94%B7%EF%BC%89.png'
        ],
        teacherImg: [
          'https://gulimall-xiaochun.oss-cn-beijing.aliyuncs.com/img/%E5%A4%B4%E5%83%8F-%E5%A5%B3%E4%BA%8C.png',
          'https://gulimall-xiaochun.oss-cn-beijing.aliyuncs.com/img/%E5%A4%B4%E5%83%8F-%E7%94%B7%E5%85%AD.png'
        ],
        stepData: [],
        activeStep: 1,
        guideId: ''
      }
    },
    created() {
      this.init()
    },
    methods: {
      init(){
        if(this.userId != 1){
          selectProjectProcess().then(({data}) => {
            if(data.code === 0){
              this.stepData = data.list;
              selectStudentProcess(this.userId).then(({data}) => {
                if(data.code === 0){
                  this.activeStep = data.studentProcess.processId
                }else{
                  this.notify("初始化错误，请稍后再试！", "error")
                }
              }).catch(err => {
                console.error(err)
                this.notify("初始化错误，请稍后再试！", "error")
              })
            }else{
              this.notify("初始化错误，请稍后再试！", "error")
            }
          }).catch(err => {
            console.error(err)
            this.notify("初始化错误，请稍后再试！", "error")
          })
          selectProjectByStudentId(this.userId).then(({data}) => {
            if(data.code === 0){
              this.projectName = data.projectClientVo.projectName
              this.studentInfo.gender = data.projectClientVo.studentGender
              this.studentInfo.name = data.projectClientVo.studentName
              this.teacherInfo.name = data.projectClientVo.teacherName
              this.sProject.address = data.projectClientVo.addresses.split(',')
              this.sProject.times = data.projectClientVo.times.split(',')
              this.tProject.address = data.projectClientVo.raddresses.split(',')
              this.tProject.times = data.projectClientVo.utimes.split(',')
              this.guideId = data.projectClientVo.guideId
            }else{
              this.notify("初始化错误，请稍后再试！", "error")
            }
          }).catch(err => {
            console.error(err)
            this.notify("初始化错误，请稍后再试！", "error")
          })
        }
      },
      downFile(url){
        window.open(url)
      },
      handleFileSuccess(res, file){
        console.log(res)
        let _this = this
        saveProject(this.guideId, res.url).then(({data}) => {
          console.log(data)
          if(data.code === 0){
            _this.$notify({
              title: '上传成功',
              type: 'success'
            })
            _this.notify("上传成功", "success")
          }else{
            _this.notify("上传失败，请稍后再试！", "error")
            _this.$notify({
              title: '上传失败，请稍后再试！',
              type: 'error'
            })
          }
        }).catch(err => {
          console.error(err)
          this.notify("上传失败，请稍后再试！", "error")
        })
      }
    }
  }
</script>

<style scoped>

</style>
